<script lang="ts">
import {defineComponent, PropType} from 'vue'
import Block from "@/components/minesweeper/Block.vue";

export interface TopData {
  n: number,      //左上角显示的剩余雷数
  rbs: string,    //重玩按钮显示的字符
}

export default defineComponent({
  name: "Top",
  components: {Block},
  props: {
    modelValue: {type: Object as PropType<TopData>, required: true},
    running: {type: Boolean, default: true},
    onReStart: {type: Function, required: true},
  },
  data() {
    return {
      t: 0,     //计时
      tm: null as NodeJS.Timeout | null, //计时器
      b: {text: this.modelValue.rbs},
    };
  },
  mounted() {
    this.start();
  },
  watch: {
    running(newVal: boolean) {
      this.stop();
      if (newVal) {
        this.start();
      }
    },
  },
  methods: {
    start() {
      this.t = 0;
      this.tm = setInterval(() => this.t++, 1000);
    },
    stop() {
      this.tm && clearInterval(this.tm);
    },
    onClick() {
      this.stop();
      this.start();
      this.onReStart();
    }
  }
})
</script>

<template>
  <div id="top">
    <p style="display:inline-block">{{ modelValue.n }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
    <Block v-model="b" @click="onClick"/>
    <p style="display:inline-block">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ t }}</p>
  </div>
</template>

<style scoped>

</style>